<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <sport-edit
        ref="sportEdit"
        v-on:save-finished="getSportList()"
      ></sport-edit>
      <role-permission ref="rolePermission"></role-permission>

      <el-row class="search-row">
        <el-col :span="18">
          <el-input
            placeholder="档案号/姓名"
            size="small"
            v-model="search.portname"
          >
          </el-input>

          <el-button type="primary" size="small" @click="getSportList()"
            >查询</el-button
          >

          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            v-show="true"
            @click="handleCreateSport()"
            >添加</el-button
          >
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="sportList"
            border
            size="mini"
            header-cell-class-name="header-row"
          >
            <el-table-column
              prop="id"
              label="编号"
              width="80px"
              header-align="center"
            ></el-table-column>

            <el-table-column
              prop="portCoding"
              label="编码"
              header-align="center"
            ></el-table-column>

            <el-table-column
              prop="portName"
              label="项目名称"
              header-align="center"
            ></el-table-column>

            <el-table-column
              prop="portStrength"
              label="运动强度"
              header-align="center"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="portLent"
              label="千步当量"
              header-align="center"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="portTime"
              label="运动时间"
              header-align="center"
              align="center"
            >
            </el-table-column>

            <el-table-column
              prop="portAge"
              label="年龄区间"
              header-align="center"
              align="center"
            >
            </el-table-column>

            <el-table-column
              label="操作"
              header-align="center"
              align="center"
              width="200"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="true"
                  type="text"
                  size="mini"
                  @click="handleEditSport(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  v-show="true"
                  type="text"
                  size="mini"
                  @click="handleDeleteSport(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[7, 14, 21]"
            :page-size="2"
            layout="total, sizes, prev, pager, next, jumper"
            :total="roleTotal"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { portList, deleteSport, sportBefore } from "@/api/Repository/sport";
import { listResourcePermission } from "@/api/resource";
import SportEdit from "@/components/Repository/sport/sportEdit";
import RolePermission from "@/components/role/rolePermission";

export default {
  data() {
    return {
      loading: false,
      region: "",
      permission: {
        add: false,
        edit: false,
        remove: false
      },
      search: {
        portname: "",
        offset: 1,
        limit: 7
      },
      roleTotal: 0,
      sportList: []
    };
  },
  methods: {
    getSportList() {
      this.loading = true;
      portList(this.search)
        .then(response => {
          this.roleTotal = response.data.total;
          this.sportList = response.data.rows;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    },

    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.getSportList();
    },

    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.getSportList();
    },

    async pageInit() {
      this.getSportList();
    },

    handleCreateSport() {
      this.$refs.sportEdit.$emit("openAddSportDialog");
    },

    handleEditSport(index, row) {
      this.loading = true;
      sportBefore(row.id)
        .then(response => {
          this.$refs.sportEdit.$emit("openEditSportDialog", response.data);
          this.getSportList();
          this.loading = false;
        })
        .catch(error => {
          this.outputError(error);
        });
    },

    handleDeleteSport(index, row) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading = true;
          deleteSport(row.id)
            .then(response => {
              this.loading = false;
              if (response.data > 0) {
                this.getSportList();
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
              }
            })
            .catch(error => {
              this.$message.error("删除失败");
            });
        })
        .catch(() => {});
    },

    handleSetPermission(index, row) {
      this.$refs.rolePermission.$emit("openSetPermissionDialog", row);
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  components: { SportEdit, RolePermission },
  created() {
    this.pageInit();
  }
};
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.role-locked {
  color: red;
}
.role-not-locked {
  color: green;
}
</style>